<template>
  <base-layout :style="{ backgroundImage: `url(${bg})` }">
    <template v-slot:header>
      <a-row class="header" type="flex" justify="center">
        <a-col :span="24" class="title">
          <img :src="logoImg" alt="" />
          <h1>{{ appName }}</h1>
        </a-col>
        <a-col :span="24" class="desc">
          <span>Ant Design 是西湖区最具影响力的 Web 设计规范</span>
        </a-col>
      </a-row>
    </template>

    <a-layout-content class="login">
      <a-form class="form" :wrapper-col="{ span: 24 }" @keyup.enter="login">
        <a-form-item ref="username" v-bind="validateInfos.username">
          <a-input
            v-model:value="loginForm.username"
            placeholder="Username"
            size="large"
          >
            <template #prefix>
              <user-outlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item ref="password" v-bind="validateInfos.password">
          <a-input
            v-model:value="loginForm.password"
            type="password"
            placeholder="Password"
            size="large"
          >
            <template #prefix>
              <lock-outlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item class="mb-1">
          <a-button
            type="primary"
            block
            size="large"
            :loading="loading"
            @click="login"
          >
            登录
          </a-button>
        </a-form-item>
        <a-row type="flex" justify="space-between">
          <a-col :span="4">
            <a-form-item style="margin-bottom: 12px">
              <router-link to="/"> 找回密码 </router-link>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-layout-content>
  </base-layout>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import BaseLayout from "@/layouts/BaseLayout.vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { Store, useStore } from "vuex";
import {
  Form,
  Button,
  Col,
  Row,
  Input,
  Checkbox,
  Layout,
} from "ant-design-vue";
import logoImg from "@/assets/images/logo.png";
import bg from "@/assets/images/bg.svg";
import { useAuth } from "@/hooks";

export default defineComponent({
  components: {
    BaseLayout,
    UserOutlined,
    LockOutlined,
    Layout: Layout,
    ALayoutHeader: Layout.Header,
    ALayoutContent: Layout.Content,
    ALayoutFooter: Layout.Footer,
    AForm: Form,
    AFormItem: Form.Item,
    AButton: Button,
    ACol: Col,
    ARow: Row,
    AInput: Input,
    ACheckbox: Checkbox,
  },
  setup() {
    const store: Store<any> = useStore();
    const appName = store.state.app.appName;

    const { login, loading, loginForm, validateInfos } = useAuth();
    return {
      bg,
      appName,
      logoImg,
      login,
      loading,

      validateInfos,
      loginForm,
    };
  },
});
</script>
<style lang="less" scoped>
.header {
  margin-top: 120px;
  margin-bottom: 60px;
  .title {
    height: 44px;
    line-height: 44px;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    img {
      height: 44px;
      vertical-align: top;
      margin-right: 12px;
    }
    h1 {
      font-size: 33px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
      margin: 0;
    }
  }
  .desc {
    text-align: center;
  }
}
.login {
  display: flex;
  justify-content: center;
  .form {
    width: 360px;
  }
}
</style>
